<template>
  <div>
    <div class="search">
      <div class="search_bottom">
        <img src="@/assets/images/bander.png" alt="" />
      </div>
      <div class="search_up">
        <h1>
          <p>安全溯源 品质保证</p>
        </h1>
        <span>让每一件农产品都可追溯，让每一位消费者都放心</span>

        <div class="search-wrapper">
          <input
          type="text"
          class="search-input"
          placeholder="请输入产品追溯码"
          v-model="searchInput"
          @keyup.enter="handleSearch"
        />
          <button class="search-btn" @click="handleSearch">
            <svg
              t="1753759479550"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3436"
              width="100"
              height="60"
            >
              <path
                d="M494.4896 158.72a308.1472 308.1472 0 0 0-219.264 90.88 308.1472 308.1472 0 0 0-90.88 219.2384c0 82.8672 32.2816 160.768 90.88 219.3664a308.5824 308.5824 0 0 0 218.8288 91.1104c41.5744 0 83.0208-8.3968 121.984-24.9856a33.7152 33.7152 0 1 0-26.3168-62.1056 241.536 241.536 0 0 1-266.624-51.712 240.896 240.896 0 0 1-71.1424-171.5712c0-64.768 25.2672-125.696 71.1424-171.5712a240.896 240.896 0 0 1 171.5456-71.1424c64.8192 0 125.568 25.2416 171.4688 71.168 93.2096 93.184 94.336 246.016 2.5344 340.48l-1.1008 1.3824-0.9984 0.7936-0.8192 0.8704a33.7152 33.7152 0 0 0 0.4096 47.36l113.3568 113.3824a33.7152 33.7152 0 0 0 47.7184 0l2.4576-2.7648c10.624-13.312 9.8048-32.768-2.4576-45.0304l-91.1104-91.1104-3.6864 4.5568c101.9904-122.2656 94.3616-304.768-18.688-417.7408A308.1472 308.1472 0 0 0 494.4896 158.72z"
                fill="#ffffff"
                p-id="3437"
              ></path>
              <path
                d="M350.464 557.824a170.496 170.496 0 0 0 83.8912 68.1728 19.2 19.2 0 1 1-13.4656 35.968 208.896 208.896 0 0 1-102.8352-83.5328 19.2 19.2 0 1 1 32.4096-20.5824z m-45.568-110.1824a19.2 19.2 0 0 1 19.2 19.2c0 10.5216 0.9472 20.9152 2.816 31.0784a19.2 19.2 0 1 1-37.76 6.9888 209.3824 209.3824 0 0 1-3.4816-38.0672 19.2 19.2 0 0 1 19.2-19.2z"
                fill="#ffffff"
                p-id="3438"
              ></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { listArchive } from "@/api/ncpsy/management/archive";
import { ElMessage } from "element-plus";

const router = useRouter();

const searchInput = ref("");
const handleSearch = async () => {
  const traceabilityCode = searchInput.value.trim();
  if (!traceabilityCode) {
    ElMessage.warning("请输入搜索内容");
    return;
  }

  try {
    // 根据追溯码查询农产品档案数据
    const response = await listArchive({
      traceabilityCode: traceabilityCode,
      pageNum: 1,
      pageSize: 10
    });

    if (response.rows && response.rows.length > 0) {
      // 找到对应的数据，获取primaryId
      const archiveData = response.rows[0];
      const primaryId = archiveData.primaryId;
      
      // 跳转到详情页面，传递primaryId
      router.push({
        path: "/showall/ProductRoot/PRPage2",
        query: { primaryId: primaryId }
      });
    } else {
      ElMessage.error("未找到对应的农产品信息，请检查追溯码是否正确");
    }
  } catch (error) {
    console.error("查询失败:", error);
    ElMessage.error("查询失败，请稍后重试");
  }
};
</script>

<style scoped>
.search {
  height: 85vh;
  position: relative;
}

.search_bottom,
.search_up {
  width: 99.2vw;
  height: 85vh;
}

.search_up {
  z-index: 100;
  position: absolute;
  top: 0px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  color: #ffffff;
}

img {
  width: 99.2vw;
  height: 85vh;
}

p {
  font-size: 70px;
  margin: 20px;
}

span {
  font-size: 30px;
}

.search-wrapper {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
  width: 800px;

  margin-top: 60px;
}

/* 输入框样式 */
.search-input {
  flex: 1;
  height: 80px;
  padding: 0 12px;
  border: none;
  outline: none;
  font-size: 20px;
  color: #333;
}
.search-input::placeholder {
  color: #999; /* 浅灰色占位文字 */
}
.search-btn {
  border: none;
  border-radius: 5px;
  width: 100px;
  height: 60px;
  margin-right: 20px;
  background-color: #2e7d32;
}
</style>
